<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>User</title>
    <script src="JQuery/jquery-3.2.1.js"></script>
    <script>
        function f1() {
            alert("Hello World")
        }

        $(function () {
            function Init(node) {
                return node.html("<option>---请选择---</option>");
            }

            //多维数组做数据来源
            var db = {
                江苏: {
                    南京: "玄武,秦淮,鼓楼",
                    苏州: "园区,新区,独墅湖,姑苏区",
                    盐城: "阜宁,滨海,响水"
                },
                浙江: {
                    宁波: "余姚,慈溪,奉化",
                    杭州: "西湖,余杭,萧山",
                    嘉兴: "南湖,秀洲,海岩"
                },
                广东: {
                    广州市: "越秀区,荔湾区,海珠区",
                    深圳市: "福田区,罗湖区,南山区",
                    珠海市: "香洲区,斗门区,金湾区",
                }
            };
            //初始化select节点
            $.each(db, function (changShang) {
                $("#selF").append("<option>" + changShang + "</option>");
            })
            //一级变动
            $("#selF").change(function () {
                //清空二三级
                Init($("#selB"));
                Init($("#selC"));
                $.each(db, function (cs, pps) {
                    if ($("#selF option:selected").text() == cs) {
                        $.each(pps, function (pp, xhs) {
                            $("#selB").append("<option>" + pp + "</option>");
                        });
                        $("#selB").change(function () {
                            Init($("#selC"));
                            $.each(pps, function (pp, xhs) {
                                if ($("#selB option:selected").text() == pp) {
                                    $.each(xhs.split(','), function () {
                                        $("#selC").append("<option>" + this + "</option>");
                                    })
                                }
                            })
                        })
                    }
                })
            })

        })
    </script>
</head>
<body onload="f1()">
<fieldset>
    <table>
        <tr>
            <td>
                姓名
            </td>
            <td>
                生日
            </td>
            <td>
                操作
            </td>
            <td>
                省
            </td>
            <td>
                市
            </td>
            <td>
                区
            </td>
        </tr>
        <tr>
            <c:forEach items="${users}" var="u"
                       varStatus="s">
        <tr class="row${s.index%2+1}">
            <td>${u.name}</td>
            <td>${u.birthday}</td>
        </tr>
        </c:forEach>
    </table>
</fieldset>
</body>

</html>